import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';

let slideAnimationEnter = animation([
  style({ opacity: 0, transform: 'translateY(40px)' }),
  animate(500)
])

let slideAnimationLeave = animation([
  animate(
    "{{duration}} {{delay}} {{easing}}",
    keyframes([
      style({ offset: 0.3, transform: 'translateX(-80px)' }),
      style({ offset: 1, transform: 'translateX(100%)' })
    ])
  )
], {
  params: {
    duration: "500ms",
    delay: "100ms",
    easing: 'ease-out'
  }
})

export const slideAnimation = trigger('slide', [
  // 入场动画
  transition('void => *', useAnimation(slideAnimationEnter)),
  // 出场动画
  // transition('* => void', [
  //   animate(600, style({opacity: 0, transform: 'translateY(100%)'}))
  // ]),
  transition('* => void', useAnimation(slideAnimationLeave, {
    params: {
      duration: "600ms",
      delay: "100ms",
      easing: 'ease-out'
    }
  }))
])